<template>
  <view class="comment_item">
    <view :class="{isTwoTop:isTwo}" class="top ">
      <view class="top_left">
        <image :src="props.data.user_avatar||defaultAvatar" class="user_avatar"/>
        <!--        <uni-tag v-if="props.data.user_id === props.myInfo.user_id" :inverted="false" circle class="tag" size="mini"-->
        <!--                 text="作者" type="primary"/>-->
        <text class="user_name text_b_26">{{ props.data.user_name }}</text>
        <text class="user_name text_b_26">{{ cReplyName }}</text>
      </view>
      <view class="top_right  l_f_r_c_c" @tap.stop="likeClick(props.data)">
        <text :class="[props.data.is_like ? 'active' : '', 'like_count']">{{ cLikeCount }}</text>
        <uni-icons v-if="props.data.is_like" color="#f67800" size="20" type="heart-filled"></uni-icons>
        <uni-icons v-else color="#f67800" size="20" type="heart"></uni-icons>
      </view>
    </view>
    <view class="content">
      {{ c_content }}
      <text v-if="isShrink" class="shrink" @tap.stop="expandContentFun(props.data.user_content)">...展开</text>
      <text
          v-if="!isShrink && user_content.length > contentShowLength"
          class="shrink"
          @tap.stop="shrinkContentFun(props.data.user_content)"
      >
        收起
      </text
      >
    </view>
    <view class="bottom l_f_r">
      <uni-dateformat :date="props.data.createTime" :threshold="[60000, 1000*60*60*24]" class="create_time l_f_r"
                      format="yyyy-MM-dd hh:mm"></uni-dateformat>
      <!--      <text class="create_time">{{ props.data.createTime }}</text>-->
      <text v-if="props.data.user_id === props.myInfo.user_id" class="delete" @tap.stop="deleteClick(props.data)">删除
      </text>
      <text class="reply" @tap.stop="replyClick(props.data)"
      >回复
      </text
      >
    </view>
  </view>
</template>

<script setup>
import {reactive, ref, onMounted, computed, watch, watchEffect} from "vue";

const defaultAvatar = "https://pili-vod.guanxikeji.com/fubao/img/1755758365748.png"
const props = defineProps({
  // 评论数据
  data: {
    type: Object,
    default: () => {
    },
  },
  // 父级评论数据
  pData: {
    type: Object,
    default: () => {
    },
  },
  myInfo: {
    type: Object,
    default: () => {
    },
  },
  isTwo: {
    type: Boolean,
    default: false
  }

});

// 被回复人名称
const cReplyName = computed(() => {
  return props.data?.reply_name ? ` ▸ ` + props.data?.reply_name : "";
});

// 点赞数显示
const cLikeCount = computed(() => {
  return props.data.like_count === 0 ? "" : props.data.like_count > 99 ? `99+` : props.data.like_count;
});

// 评论过长处理
let contentShowLength = 70; // 默认显示评论字符

let user_content = props.data.user_content;
let isShrink = ref(user_content.length > contentShowLength); // 是否收缩评论
let c_content = ref("");
watch(
    () => isShrink.value,
    (newVal) => {
      c_content.value = newVal ? user_content.slice(0, contentShowLength + 1) : user_content;
    },
    {
      immediate: true,
    }
);
// 删除变更显示定制
watch(
    () => props.data.user_content,
    (newVal, oldVal) => {
      if (newVal !== oldVal) {
        c_content.value = newVal;
      }
    }
);

// 展开文字
function expandContentFun() {
  isShrink.value = false;
}

// 收起文字
function shrinkContentFun() {
  isShrink.value = true;
}

const emit = defineEmits(["likeClick", "replyClick", "deleteClick"]);

// 点赞
function likeClick(item) {
  emit("likeClick", item);
}

// 回复
function replyClick(item) {
  // 自己不能回复自己
  // if (item.owner) return;
  emit("replyClick", item);
}

// 删除
function deleteClick(item) {
  emit("deleteClick", item);
}
</script>

<style lang="scss" scoped>
$uni-bg-color-grey: grey;
$uni-text-color-disable: #999;
$uni-color-primary: #999;
$uni-text-color-grey: grey;
$uni-text-color: #333;
$uni-bg-color-hover: #f5f5f5;
$uni-border-color: #ccc;
////////////////////////
.center {
  display: flex;
  align-items: center;
}

.ellipsis {
  overflow: hidden; //超出文本隐藏
  //white-space: nowrap; //溢出不换行
  text-overflow: ellipsis; //溢出省略号显示
}

////////////////////////
.comment_item {
  font-size: 28rpx;

  .top {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    //#ifdef APP-PLUS-NVUE
    width: 650rpx;

    &.isTwoTop {
      width: 580rpx;
    }

    //#endif

    .top_left {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;

      //overflow: hidden;

      .user_avatar {
        width: 68rpx;
        height: 68rpx;
        border-radius: 50%;
        margin-right: 12rpx;
      }

      .tag {
        margin-right: 6rpx;
      }

      .user_name {
        @extend .ellipsis;
        color: #000;
      }
    }

    .top_right {


      .like_count {
        color: grey;

        &.active {
          color: #999;
        }
      }
    }
  }

  .content {
    padding: 10rpx;
    margin-left: 70rpx;
    color: $uni-text-color;

    &:active {
      background-color: $uni-bg-color-hover;
    }

    .shrink {
      padding: 20rpx 20rpx 20rpx 0rpx;
      color: $uni-color-primary;
    }
  }

  .bottom {
    padding-left: 80rpx;
    font-size: 24rpx;
    flex-direction: row;

    .create_time {
      color: $uni-text-color-grey;
      margin-right: 20rpx;
    }

    .delete {
      padding: 0rpx 20rpx 0 20rpx;
      color: $uni-border-color;
    }

    .reply {
      color: $uni-color-primary;
    }
  }
}
</style>
